<template>
  <a-card :title="title">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
      <a-form-item label="文章标题" name="title">
        <a-input v-model:value="form.title" style="width: 50%" placeholder="文章标题" />
      </a-form-item>
      <a-form-item label="作者" name="author">
        <a-input v-model:value="form.author" style="width: 50%" placeholder="作者" />
      </a-form-item>
      <a-form-item label="文章分类" name="cid">
        <a-select v-model:value="form.cid" placeholder="请选择" style="width: 50%" clearable>
          <a-select-option v-for="item in types" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="文章图片" name="imageInput">
        <upload-img v-model="form.imageInput" placeholder="门店logo" />
      </a-form-item>
      <a-form-item label="文章简介" name="synopsis">
        <a-input v-model:value="form.synopsis" maxlength="100" type="textarea" :rows="2" />
      </a-form-item>
      <a-form-item label="是否热门" name="isHot">
        <a-switch v-model:checked="form.isHot" />
      </a-form-item>
      <a-form-item label="是否Banner" name="isBanner">
        <a-switch v-model:checked="form.isBanner" />
      </a-form-item>
      <a-form-item label="文章内容" name="content">
        <WangEditor :height="350" :value="form.content" @input="setContent" />
      </a-form-item>
    </a-form>
    <div class="flex center">
      <a-button type="primary" style="width: 300px" @click="save">
        保存
      </a-button>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import type { category } from '../classify/entity';
import { articleAddup, articleinfo, categoryList } from './api';
import { article, type Iarticle } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
  data: Partial<Iarticle>
}>(), {
})
let route = useRoute()
const title = computed(() => route.query.id ? '编辑文章' : '新增文章')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new article())
let types = $ref<category[]>()
onMounted(() => queryCate())
async function queryCate() {
  let { list } = await categoryList({ type: 3, status: '' })
  types = list
}
watchEffect(() => {
  if (route.query.id) {
    articleinfo(route.query.id).then(res => {
      form.setProps(res)
    })
  }
})
function setContent(html: string) {
  form.content = html
}
const rules = {
  articleName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
})
const emit = defineEmits(['change'])
function save() {
  form.shareTitle = form.title
  form.shareSynopsis = form.synopsis
  articleAddup(form).then(() => {
    AntMessage.success('保存成功')

  })
}

function reset() {
  form = new article()
}
</script>

<style lang="less"></style>
